<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./lib/vue.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="./lib/elementui-index.js"></script>
    <script src="./lib/axios.min.js"></script>
    <script src="./lib/params.js"></script>
    <script src="./lib/token.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
       <!-- 这是一个搜索框，进行搜索 -->
        <div style="margin: 20px 0 20px 300px; width: 500px;display: inline-block;">
            <el-input @change="" :autofocus="true" :clearable="true" placeholder="请输入申请部门关键字" v-model="alertName" class="input-with-select">
            <el-button @click="like()" slot="append" icon="el-icon-search"></el-button>
            </el-input>
          </div>
          <span @click="fz()" id="fz" class="el-icon-s-home"></span>
       
            <!-- 显示表单 -->
        <template>
            <el-table
              :data="tableData"
              stripe
              style="width: 100%">
              <el-table-column
                prop="bid"
                label="采购编号"
                width="120" >
              </el-table-column>
              
              <el-table-column
                prop="bname"
                label="采购物品"
                width="120">
              </el-table-column>
              <el-table-column
              prop="bsum"
              label="采购数量"
              width="80">
            </el-table-column>
            <el-table-column
            prop="btime"
            label="采购时间"
            width="220">
          </el-table-column>
          <el-table-column
          prop="busetime"
          label="使用时间"
          width="220">
        </el-table-column>
        <el-table-column prop="bstate" label="当前采购单状态">
            <template slot-scope="scope">
                {{ scope.row.bstate | capitalize }}
            </template>
        </el-table-column>
      
   
          <el-table-column
          prop="dept.dname"
          label="申请部门"
          width="220">
          </el-table-column>
         
              <el-table-column
                label="操作"
                fixed="right"
                width="120">
                <template slot-scope="scope">
    
            <el-button type="text" @click="assertOneBuy(scope.row.bid)">撤销</el-button>
            <el-button type="text" @click="assertOneBuystate(scope.row.bid)">申请</el-button>
                  </template>
            </el-table-column>
            </el-table>
            <h4><el-button type="primary" @click="dialogFormVisible=true">添加申请信息</el-button></h4>
          </template>
          <!-- ------------------------------------------------------------------------- -->
           <!-- 弹窗去充值页面，充值水费，电费和物业费 -->
        

       

        <el-dialog title="采购申请" :visible.sync="dialogFormVisible">
        <el-form :model="form">
            <el-form-item label="采购物品:">
                <el-input v-model="form.buy.bname"></el-input>
            </el-form-item>
            <el-form-item label="采购数量:">
                <el-input v-model="form.buy.bsum"></el-input>
            </el-form-item>
            <el-form-item v-if="false" label="采购时间:">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="采购时间:"
                     v-model="form.buy.btime" style="width: 120%;"></el-date-picker>
                  </el-col>
            </el-form-item>
            <el-form-item label="预计使用时间:">
                <el-col :span="11">
                    <el-date-picker type="date" placeholder="预计使用时间:"
                     v-model="form.buy.busetime" style="width: 110%;"></el-date-picker>
                  </el-col>
            </el-form-item>
            <el-form-item label="申请部门" >
                <el-select v-model="form.buy.dept.dname" @blur="assertDname()" placeholder="请选择" style="width: 60%;">
                    
                 <el-option						  
                   v-for="item in Dnames"
                   :label="item"
                   :value="item">
                 </el-option>
                
               </el-select>	
               <span style="color: red;">{{this.dnameFlag}}</span>
               </el-form-item>
            <!-- <el-form-item label="申请部门" :label-width="formLabelWidth">
                <el-select v-model="form.buy.dept.dname" placeholder="请选择您所在的部门">
                    <el-option label="100" value="100"></el-option>
                    <el-option label="200" value="200"></el-option>
                    <el-option label="500" value="500"></el-option>
                    <el-option label="1000" value="1000"></el-option>
                </el-select> -->
        </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="insertOneBuy()">确 定</el-button>
        </div>
        </el-dialog>
        <!-- ------------------------------------------------------------------- -->

          </template>
          <div class="block">
                <el-pagination
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageNum"
                  :page-sizes="[5, 10, 15, 20]"
                  :page-size="pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
                </el-pagination>
        </div>
      </div>
</body>
<script text="javascript">
    new Vue({
           el:"#app",
           data:{
               buyStateName:'',
               alertName:'',
               alertText:'',
               dnameFlag:'',
               tableData:[],
               Dnames:[],
               pageNum:1,
               pageSize: 5,
               total:0,
               ownerName: '',
                        dialogTableVisible: false,
                        dialogFormVisible: false,
                        form: {
                        // name: '',
                        userId:'',
                        buy:{
                        bid:'',
                        bname:'',
                        bsum: '',
                        btime:'',
                        busetime:'',
                        bstate:'',
                      
                        dept:{
                            dname:'',                          
                        }
                        }
                        },
                        formLabelWidth: '120px',
           },
           created(){
                this.getOneUserId();
                this.getAllDnames();
                
           },
           filters:{
            capitalize: function (value){
                if(value==="1"){
                    return "待申请"
                }else if(value === "2"){
                    return "待审核"
                }else if(value === "3"){
                    return "待采购"
                }else if(value === "4"){
                    return "已完成采购"
                }else if(value === "0"){
                    return "已撤销"
                }
            }
        },
        
//  -----------------

           methods:{
            //    判断一下填写的这个部门，是不是符合登陆人所在的部门，如果不是则不让申请
            assertDname(){

                var userId=this.form.userId;
                var dname =this.form.buy.dept.dname;
                axios.get("http://localhost:8001/production1/dept/assertDname",{
                    params:{
                        userId:userId,
                        dname:dname
                    }
                }).then(response=>{
                    var Flag=response.data;
                    if(Flag){
                        
                        this.dnameFlag="";
                    }else{
                        this.dnameFlag="您不是这个部门的，不可以申请到这个部门哟";
                    }
                })
            },
            // 插入一行采购数据
               insertOneBuy(){
                   var bean = this.form.buy; 
                   console.log(bean);
                   axios.post(`http://localhost:8001/production1/buy/insertOne/${this.form.userId}`,bean)
                   .then(
                       response=>{
                           var flag=response.data;
                           console.log(flag+"傻逼");
                           if(flag){
                          
                           this.dialogFormVisible=false;
                           this.$message.success("申请成功");
                           this.getAll();
                           }else{
                           this.$message.error("申请失败")
                           }
                       }
                   )
               },
            //    得到所有的部门名称
             getAllDnames(){
                 axios.get("http://localhost:8001/production1/dept/findAllDname").then(
                     response=>{
                         this.Dnames=response.data;
                     }
                 )
             },
            //  得到登陆的用户Id
              getOneUserId(){
                //  直接发送请求，获取当前登陆的用户Id
                axios.get("http://localhost:8001/production1/buy/sendOneUserId").then(
                    response=>{
                        console.log(response.data)
                       this.form.userId=response.data;
                      
                       this.getAll();
                    }
                )
              },
          
               handleSizeChange(val) {
                   console.log(`每页 ${val} 条`);
                   this.pageSize=val;
                   this.getAll();
               },
               handleCurrentChange(val) {
                   console.log(`当前页: ${val}`);
                   this.pageNum=val;
                   this.getAll();
               },
            //    判断这个采购单，是不是这个用户所属于部门采购的，如果是，可以删除
            //    定义一个有参函数，必须要传入当前采购单的编号才能去断言这个采购单是否属于这个用户
              assertOneBuy(bid){
                var userId=this.form.userId;
                console.log(bid+"===============")
                console.log(userId+"userId====================")
                axios.get("http://localhost:8001/production1/buy/assert",{
                    params:{
                        bid:bid,
                        userId:userId
                    }
                }).then(response=>{
                    var flag=response.data;
                    if(!flag){
                        this.$message.warning("您不是这个部门的负责人，不能撤销")
                        this.getAll();
                        return;
                    }
                    this.deleteOneBuy(bid);
                })
              },
               
            //    删除一个用户
        //    先根据用户Id去判断当前登陆的是不是当前用户去提交的申请，如果不是，则不能撤销
        // 如果是当前用户那么可以撤销
            deleteOneBuy(bid){
               
               

                // 然后把bid和userId都传输到后端进行判断这个用户的角色和申请这个采购单的角色是不是相同
                
            
                axios.get("http://localhost:8001/production1/buy/deleteOneBuy?bid="+bid).then(response=>{
                    if(response.data){
                      
                        this.$message.success("撤销成功")
                    }else{
                      
                        this.$message.error("撤销失败")
                    }
                    this.getAll();
                })
            },
            //断言一下，当前的用户是否有权力对这个采购信息进行申请
            assertOneBuystate(bid){
                var userId=this.form.userId;
                console.log(bid+"===============")
                console.log(userId+"userId====================")
                axios.get("http://localhost:8001/production1/buy/assert",{
                    params:{
                        bid:bid,
                        userId:userId
                    }
                }).then(response=>{
                    var flag=response.data;
                    if(!flag){
                        this.$message.error("对不起，这个采购单不是您填写的，您不能进行申请");
                        this.getAll();
                        return;
                    }
                    this.updateOneBuyState(bid);
                    this.getAll();
                })
              },
            //   把采购单的状态加一
            updateOneBuyState(bid){
                axios.get("http://localhost:8001/production1/buy/report?bid="+bid).then(response=>{
                    var flag=response.data;
                    if(flag){
                          this.$message.success("申请成功")
                    }else{
                        this.$message.error("申请失败")  
                    }
                })

            },
            // 执行回调函数，返回本来所有的数据
            fz(){
                this.getAll();
            },
            like(){
                     var pageNum=this.pageNum;
                     var pageSize=this.pageSize;
                     var dname=this.alertName;
                     axios.get("http://localhost:8001/production1/buy/findAllBuyByDname",{
                         params:{
                             pageNum:pageNum,
                             pageSize:pageSize,
                             dname:dname
                         }
                     })
                     .then(response=>{
                        var data = response.data;
                       this.tableData = data.list;
                       console.log(data.list)
                       this.total = data.total;
                       this.pageNum = data.pageNum;
                       this.pageSize = data.pageSize
                     })
               },
             //    通过得到的用户Id，去发送给后端，然后得到查询出的相应的应该显示的数据
            //  得到所有的采购数据
               getAll(){
                   var userId=this.form.userId;

                   axios.get("http://localhost:8001/production1/buy/findAll",{
                       params:{
                           pageNum:this.pageNum,
                           pageSize:this.pageSize,
                           userId:userId
                       }
                   })
                   .then(response=>{
                       console.log(response.data)
                       var data = response.data;
                     
                       this.tableData = data.list;
                       console.log(data.list)
                       this.total = data.total;
                       this.pageNum = data.pageNum;
                       this.pageSize = data.pageSize
                   })
               }
           }
       })
</script>
</html>